<template>
	<div class="star" :class="'star-' + size">
		<!-- 计算出需要多少的 满意 半满意 不满意 -->
		<span class="star-item" v-for="(itemClassName,index) in starClass" :key="index" :class="itemClassName"></span>
	</div>
</template>

<script>
	const class_on = 'on' // 出现 n 次
	const class_half = 'half' // 出现 0/1 次
	const class_off = 'off' // 出现 n 次
	export default{
		props:{
			score:Number, // 评价星星数值 0~5
			size:Number // image size
		},
		computed:{
			// 计算出星星的数量,必须是5颗
			starClass(){
				let resArr = [] // 最终计算出的星星结果
				let onInteger = Math.floor(this.score) // 计算出满星需要多少颗,'on'
				// on星星
				for (let i = 0; i < onInteger; i++) {
					resArr.push(class_on) // 执行 n 次
				}
				// 半星 half
				if(this.score*10 - onInteger*10 >= 5 && this.score*10 - onInteger*10 < 10){
					resArr.push(class_half)
				}
				// 无星 off
				while(resArr.length < 5){
					resArr.push(class_off)
				}
				return resArr
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../common/stylus/mixins.styl';
	 .star {
		float: left;
		font-size: 0;
	}
	
	 .star .star-item {
		display: inline-block;
		background-repeat: no-repeat;
	}
	
	 .star.star-48 .star-item {
		width: 20px;
		height: 20px;
		margin-right: 22px;
		background-size: 20px 20px;
	}
	
	 .star.star-48 .star-item:last-child {
		margin-right: 0;
	}
	
	 .star.star-48 .star-item.on {
		background-image: url("./images/stars/star48_on@2x.png");
	}
	
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		 .star.star-48 .star-item.on {
			background-image: url("./images/stars/star48_on@3x.png");
		}
	}
	
	 .star.star-48 .star-item.half {
		background-image: url("./images/stars/star48_half@2x.png");
	}
	
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		 .star.star-48 .star-item.half {
			background-image: url("./images/stars/star48_half@3x.png");
		}
	}
	
	 .star.star-48 .star-item.off {
		background-image: url("./images/stars/star48_off@2x.png");
	}
	
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		 .star.star-48 .star-item.off {
			background-image: url("./images/stars/star48_off@3x.png");
		}
	}
	
	 .star.star-36 .star-item {
		width: 15px;
		height: 15px;
		margin-right: 6px;
		background-size: 15px 15px;
	}
	
	 .star.star-36 .star-item:last-child {
		margin-right: 0;
	}
	
	 .star.star-36 .star-item.on {
		background-image: url("./images/stars/star36_on@2x.png");
	}
	
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		 .star.star-36 .star-item.on {
			background-image: url("./images/stars/star36_on@3x.png");
		}
	}
	
	 .star.star-36 .star-item.half {
		background-image: url("./images/stars/star36_half@2x.png");
	}
	
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		 .star.star-36 .star-item.half {
			background-image: url("./images/stars/star36_half@3x.png");
		}
	}
	
	 .star.star-36 .star-item.off {
		background-image: url("./images/stars/star36_off@2x.png");
	}
	
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		 .star.star-36 .star-item.off {
			background-image: url("./images/stars/star36_off@3x.png");
		}
	}
	
	 .star.star-24 .star-item {
		width: 10px;
		height: 10px;
		margin-right: 3px;
		background-size: 10px 10px;
	}
	
	 .star.star-24 .star-item:last-child {
		margin-right: 0;
	}
	
	 .star.star-24 .star-item.on {
		background-image: url("./images/stars/star24_on@2x.png");
	}
	
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		 .star.star-24 .star-item.on {
			background-image: url("./images/stars/star24_on@3x.png");
		}
	}
	
	 .star.star-24 .star-item.half {
		background-image: url("./images/stars/star24_half@2x.png");
	}
	
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		 .star.star-24 .star-item.half {
			background-image: url("./images/stars/star24_half@3x.png");
		}
	}
	
	 .star.star-24 .star-item.off {
		background-image: url("./images/stars/star24_off@2x.png");
	}
	
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		 .star.star-24 .star-item.off {
			background-image: url("./images/stars/star24_off@3x.png");
		}
	}
</style>